<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search, Refresh, Check, Close, Remove, Star, Delete, VideoPlay } from '@element-plus/icons-vue';
import {  getVideoService, updVideoStatusService } from '@/apis/video';

const searchInfo = ref({
  page: 1,
  pageSize: 10,
  username: '',
  title: '',
  status: ''
})
const options = [
  {
    value: '',
    label: '全部',
  },
  {
    value: 0,
    label: '待审核',
  },
  {
    value: 1,
    label: '已上线',
  },
  {
    value: 2,
    label: '已下架',
  },
]
const tableData = ref([]) // 表格数据
const selectedVideos = ref([]) // 选中视频
const total = ref(0) // 总页数
const getAllVideo = async () => {
  const res = await getVideoService(searchInfo.value)
  console.log(res);
  tableData.value = res.data.records
  total.value = res.data.total
}


// 获取状态对应的类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'info'
  }
  return statusMap[status]
}

// 获取状态对应的文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已上线',
    2: '已下架'
  }
  return statusMap[status]
}

// 处理通过/驳回操作
const handleAudit = (row, action) => {

  const actionText = action === 'pass' ? '通过' : '驳回'
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm(
    `确定要${actionText + row.username}的视频"${row.title}"的审核吗？`,
    '审核确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: action === 'pass' ? 'success' : 'warning'
    }
  ).then(async () => {
    row.status = actionText === '通过' ? 1 : 2
    selectedVideos.value = [row]
    const res = await updVideoStatusService(selectedVideos.value)
    // console.log(res);
    // eslint-disable-next-line no-undef
    ElMessage.success(res.data)
  })
}

// 处理下架操作
const handleOffline = (row) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm(
    `确定要下架${row.username}的视频"${row.title}"吗？`,
    '审核确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }
  ).then(async () => {
    row.status = 2 // 下架
    selectedVideos.value = [row]
    const res = await updVideoStatusService(selectedVideos.value)
    console.log(res);
    // eslint-disable-next-line no-undef
    ElMessage.success("下架成功")
  })
}
const formatDateTime = (date) => computed(() => date.substring(0, 10) + " " + date.substring(11))
const handleSelectionChange = (val) => {
  selectedVideos.value = val
  // console.log(selectedVideos.value);
}
const handleSearch = async () => {
  getAllVideo()
}
const handleReset = () => {
  searchInfo.value = {}
  getAllVideo()
}
// 批量下架
const handleBatchDelete = async () => {
  console.log(selectedVideos.value);
  const isDelist = selectedVideos.value.every(v => v.status !== 2)
  console.log(isDelist);

  if (!isDelist) {
    // eslint-disable-next-line no-undef
    ElMessage.error('已选中下架视频');
    return
  }
  const videos = selectedVideos.value.map(v => ({
    id: v.id,
    status: 2,
  }));
  console.log(videos);
  await updVideoStatusService(videos)
  getAllVideo()
  // eslint-disable-next-line no-undef
  ElMessage.success('批量下架视频成功');
}
// 分页
const handlePageChange = (page) => {
  searchInfo.value.page = page
  getAllVideo()
}
onMounted(() => {
  getAllVideo()
})
</script>
<template>
  <el-container>
    <el-header>
      <el-form>
        <el-form-item>
          <span>视频标题</span>
          <el-input v-model="searchInfo.title" style="width: 240px" placeholder="请输入视频标题" />
        </el-form-item>
        <el-form-item>
          <span>作者</span>
          <el-input v-model="searchInfo.username" style="width: 240px" placeholder="请输入作者" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchInfo.status" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon>
              <Search />
            </el-icon>搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <div class="action-bar">
      <el-button type="danger" :disabled="!selectedVideos.length" @click="handleBatchDelete"
        style="display: flex;align-items: center;">
        <el-icon style="margin-right: 5px;">
          <Delete />
        </el-icon>批量下架
      </el-button>
    </div>
    <el-main style="margin: 0;" v-if="tableData.length !== 0">
      <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" height="340">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="videoContent" label="视频封面" width="150" style="position: relative;">
          <el-image src="https://via.placeholder.com/320x180" fit="cover" class="video-cover" />
          <el-icon
            style="font-size: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;">
            <VideoPlay />
          </el-icon>
        </el-table-column>
        <el-table-column prop="username" label="作者信息" width="200">
          <template #default="item">
            <div style="display: flex;align-items: center;">
              <el-avatar :size="40" src="/src/assets/images/avatar.png" />
              <p style="margin-left: 10px;">{{ item.row.username }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="300"></el-table-column>
        <el-table-column prop="like" label="数据统计" width="150">
          <template #default="{ row }">
            <el-container>
              <div class="v_data">
                <svg t="1736084709372" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2335" width="18" height="18">
                  <path
                    d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z"
                    fill="#040000" p-id="2336"></path>
                  <path
                    d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z"
                    fill="#040000" p-id="2337"></path>
                  <path
                    d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z"
                    fill="#040000" p-id="2338"></path>
                </svg>
                <span>{{ row.likes }}</span>
              </div>
              <div class="v_data" style="margin-left: 10px;">
                <el-icon style="font-size: 18px;">
                  <Star />
                </el-icon>
                <span>{{ row.collects }}</span>
              </div>
            </el-container>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="uploadDate" label="上传时间" width="220">
          <template #default="item">
            <span>{{ formatDateTime(item.row.uploadDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button v-if="scope.row.status === 0" link type="success" size="small"
              @click="handleAudit(scope.row, 'pass')">
              <el-icon>
                <Check />
              </el-icon>
              通过
            </el-button>
            <el-button v-if="scope.row.status === 0" link type="danger" size="small"
              @click="handleAudit(scope.row, 'reject')">
              <el-icon>
                <Close />
              </el-icon>
              驳回
            </el-button>
            <el-button v-if="scope.row.status === 1" link type="warning" size="small" @click="handleOffline(scope.row)">
              <el-icon>
                <Remove />
              </el-icon>
              下架
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 分页 -->
    <el-footer v-if="tableData.length !== 0">
      <el-pagination background layout="prev, pager, next" :total="total" @change="handlePageChange"/>
    </el-footer>
    <EmptyData v-else @reset="handleReset" />
  </el-container>
</template>
<style scoped lang="scss">
@import url("@/assets/style/manage.scss");

.v_data {
  display: flex;
  align-items: center;
}
</style>
